<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器  语法：任意的选择器:hover【悬停】 每个伪类选择器，具备特点 
			                    所有元素都具备：hover  【常见伪类选择器】
			*/
		   h1:hover{
			   color: #00ffff;
			   background: #ffaa00;
		   }
		   /* 
		    伪类选择器    link          链接未点击时状态
			             active        链接被点击时状态
						 visited       链接点击后状态
						 hover         悬停链接时状态
		    主要结合在一起，针对a元素效果
			
			*/
		   a:link{   /*未访问的状态*/
			color: #ff5500;
			/*去掉超链接的下划线*/
			text-decoration: none;
		   }
		   a:active{   /*被点击时的状态*/
		   			color: #00ff00;
		   			background: #ffff00;		
		   }
		   a:visited{   /*点击后的状态*/
		   			color: #aaaaff;
		   			background: #ffaa00;
		   }
		   a:hover{   
		   			font-size: 36px;
		   }
		   /* 
		    伪类选择器：  input： focus  获取焦点  鼠标点击输入框时效果
			
			针对  输入框 input元素
			*/
		   input:focus{
			   background: #aaaa00;
		   }
		   /* 伪类选择器       :first-child     第一个儿子元素
			                  :last-child      最后一个儿子元素
							  :nth-child(n)    匹配n个儿子元素
			  针对：父子级，默认父子级   table、列表...*/
			  li:first-child{
				  background: #00ff00;
				  color: #00ffff;
			  }
			  li:last-child{
				  font-size: 15px;
			  }
			  li:nth-child(2){
			  				  background: #ffaa00;
			  				  font-size: 15px;
			  }
			  li:nth-child(3){
				  background: #ffaa00;
				  font-size: 15px;
			  }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!--  元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>